<template>
  <div>
    <div class="container" v-if="liveType === '0'">
      <div class="player">
        <video-player  class="video-player vjs-custom-skin"
                       ref="videoPlayer"
                       :playsinline="true"
                       :options="playerOptions"
                       @play="onPlayerPlay($event)"
                       @ended="onPlayerEnded($event)"
        >
        </video-player>
        <Button v-if="next" @click="NextSection" class="btn" type="error">下一节</Button>
      </div>
    </div>
    <div class="detail-con">
      <div class="detail-list" v-if="liveType === '1'">
        <div  v-if="!detail.aliyunLives === {}" class="chapter-item">
          <span>暂无章节</span>
        </div>
        <Card style="margin: 10px;width: 1200px">
          <div slot="title">{{detail.courseName}}<Icon type="ios-arrow-forward" />{{detail.aliyunLives.livename}}</div>
          <div>
            <div class="player">
              <video-player  class="video-player vjs-custom-skin"
                             ref="videoPlayer"
                             :playsinline="true"
                             :options="playerOptions"
                             @play="onPlayerPlay($event)"
                             @ended="onPlayerEnded($event)"
              >
              </video-player>
            </div>
          </div>
        </Card>
      </div>
      <div class="detail-list" v-if="liveType === '0'">
        <div  v-if="!detail.chaptersListVOS.length" class="chapter-item">
          <span>暂无章节</span>
        </div>
        <Card style="width: 100%;min-height: 220px;margin-top: 15px;" v-for="(item, index) in detail.chaptersListVOS" :key="index">
          <div class="chapter">
            <div class="chapter-title">{{index + 1}}.{{item.chapterName}}</div>
            <div  v-if="!item.videoDemandList.length" class="chapter-item">
              <span>暂无章节</span>
            </div>
            <a @click="PlayAddress(items.videoId)" v-for="(items, indexs) in item.videoDemandList">
              <div class="chapter-item">
                <Icon type="md-arrow-dropright-circle" style="font-size: 28px;"/>
                <span>{{index + 1}}.{{indexs + 1}} {{items.videoName}}</span>
                <span style="float: right">
                <Icon type="md-checkmark-circle" />
              </span>
              </div>
            </a>
          </div>
        </Card>
      </div>
      <div v-if="!liveType === '1'" class="org-detail-list">
        <div class="detail-list-img">
          <img v-if="detail.handcover === null" src="./../../../assets/images/avatar1.jpg" alt="">
          <img v-else :src="detail.handcover" alt="">
        </div>
        <div class="detail-list-text">
          <p class="detail-name">{{detail.courseName}}</p>
          <p class="detail-text">课程讲师：<span>{{detail.teacherName}}</span></p>
          <p class="detail-text">课程机构：<span>{{detail.orgName}}</span></p>
          <p class="detail-text">课程价格：<span class="detail-text-price">￥{{detail.price}}</span></p>
        </div>
      </div>
    </div>
    <div class="live" v-if="liveType === '2'">
      <div class="live-left">
        <div  v-if="!detail.chaptersListVOS.length" class="chapter-item">
          <p style="text-align: center;font-size: 20px">暂无章节</p>
        </div>
        <Card style="min-height: 220px;margin-top: 15px;" v-for="(item, index) in detail.chaptersListVOS" :key="index">
          <div class="chapter">
            <div class="chapter-title">{{index + 1}}.{{item.chapterName}}</div>
            <div  v-if="!item.genseesList.length" class="chapter-item">
              <span>暂无章节</span>
            </div>
            <a @click="StartLearning(items)" v-for="(items, indexs) in item.genseesList">
              <div class="chapter-item">
                <Icon type="md-arrow-dropright-circle" style="font-size: 28px;"/>
                <span>{{index + 1}}.{{indexs + 1}} {{items.genseeTitle}}</span>
                <span style="float: right">
                <Icon type="md-checkmark-circle" />
              </span>
              </div>
            </a>
          </div>
        </Card>
      </div>
      <!--<div class="live-right">-->
        <!--<div  v-if="!url" class="chapter-item">-->
          <!--<p style="text-align: center;font-size: 20px">请选择章节</p>-->
        <!--</div>-->
        <!--<iframe-->
          <!--name="ifm"-->
          <!--id="ifm"-->
          <!--:src="url"-->
          <!--:width="width"-->
          <!--:height="height"-->
          <!--scrolling="yes"-->
          <!--frameborder="0"-->
        <!--&gt;-->
        <!--</iframe>-->
      <!--</div>-->
    </div>
  </div>
</template>

<script>
  import { videoPlayer } from 'vue-video-player'
  import 'video.js/dist/video-js.css'
  import 'vue-video-player/src/custom-theme.css'
  export default {
    data() {
      return {
        detail: {},
        liveType: {},
        next: false,
        OnDemand: [],
        // width: '',
        // height: '',
        url: '',
        playId: '',
        playerOptions: {
          playbackRates: [0.7, 1.0, 1.5, 2.0], // 播放速度
          autoplay: false, // 如果true,浏览器准备好时开始回放。
          muted: false, // 默认情况下将会消除任何音频。
          loop: false, // 导致视频一结束就重新开始。
          preload: 'auto', // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
          language: 'zh-CN',
          aspectRatio: '16:9', // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
          fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
          sources: [{
            type: '',
            src: ''// url地址
          }],
          poster: '', // 你的封面地址
          notSupportedMessage: '此视频暂无法播放，请稍后再试', // 允许覆盖Video.js无法播放媒体源时显示的默认信息。
          controlBar: {
            timeDivider: true,
            durationDisplay: true,
            remainingTimeDisplay: false,
            fullscreenToggle: true// 全屏按钮
          }
        }
      }
    },
    components: {
      videoPlayer
    },
    mounted() {
      this.searchDetail()
    },
    methods: {
      searchDetail() {
        let id = this.$route.query.id
        this.liveType = this.$route.query.liveType
        if (this.liveType === '0') {
          this.$get('/api/api/student/luCourse/detail', {courseId: id}).then((res) => {
            if (res.code === 0) {
              this.detail = res.data
              this.detail.chaptersListVOS.forEach((e) => {
                e.videoDemandList.forEach((e) => {
                  this.OnDemand.push(e.videoId)
                })
              })
              this.PlayAddress(this.OnDemand[0])
            }
          })
        } else if (this.liveType === '1') {
          this.$get('/api/api/student/liveCourse/detail', {courseId: id}).then((res) => {
            console.log(res.data)
            if (res.code === 0) {
              this.detail = res.data
              this.playerOptions.sources[0].src = res.data.aliyunLives.urlPc
              this.playerOptions.notSupportedMessage = '此直播暂未开始，请稍后再试'
            }
          })
        } else {
          this.$get('/api/api/student/course/detail', {courseId: id}).then((res) => {
            if (res.code === 0) {
              this.detail = res.data
            }
          })
        }
      },
      StartLearning(item) {
        let name = localStorage.getItem('staffName')
        if (name === 'null') {
          name = localStorage.getItem('mobile')
        }
        window.open(`${item.studentJoinUrl}?nickname=${name}`, '_blank')
        // this.url = `http://duzhe.gensee.com/sdk/site/test/iframe?testUrl=${item.studentJoinUrl}&ownerid=${item.id}&ctx=traininguid&authcode=${item.studentClientToken}`
        // this.height = window.innerHeight + 'px'
        // this.width = window.innerWidth - 220 + 'px'
      },
      doCopy(val) {
        this.$copyText(val).then(function (e) {})
      },
      PlayAddress(id) {
        this.playId = id
        this.$get('/api/video/video/address', {requestId: id}).then((res) => {
          this.playerOptions.sources[0].src = res.data[1]
          this.next = false
        })
      },
      // listen event
      onPlayerPlay(player) {
        this.next = false
      },
      onPlayerEnded(player) {
        console.log('播放结束!', player)
        this.next = true
      },
      NextSection() {
        let idx = this.OnDemand.indexOf(this.playId)
        let id = this.OnDemand[idx + 1]
        this.PlayAddress(id)
      }
    },
    computed: {
      player() {
        return this.$refs.videoPlayer.player
      }
    }
  }
</script>

<style scoped>
  .detail-con{
    width: 1200px;
    overflow: hidden;
    margin: 0 auto;
  }
  .container{
    width: 100%;
    padding: 20px;
    background: #092C20;
  }
  .player{
    width: 80%;
    margin-left: 10%;
    position: relative;
  }
  .btn{
    position: absolute;
    width: 120px;
    height: 40px;
    margin-left: -50px;
    left: 48%;
    bottom:36%;
  }
  .org-detail-list{
    width: 400px;
    float: left;
  }
  .detail-list{
    width: 800px;
    float: left;
  }
  .detail-list-img{
    height: 260px;
  }
  .detail-list-img img{
    margin: 20px;
    width: 340px;
    height: 240px
  }
  .detail-list-text{
    margin: 20px 20px 20px;
  }
  .detail-name{
    font-size: 20px;
    line-height: 30px;
  }
  .detail-text{
    font-size: 16px;
    line-height: 25px;
  }
  .detail-text-price{
    font-weight: 600;
    color: #ed4014;
  }
  .logo-con img{
    max-height: 64px;
    width: 100%;
  }
  .chapter-item {
    margin-top: 15px;
    height: 50px;
    width: 100%;
    line-height: 50px;
    padding: 0 8px;
  }
  .chapter a :hover {
    height: 50px;
    line-height: 50px;
    padding: 0 8px;
    color: #db2516;
    background: #fffcc8;
    border-radius: 5px;
  }
  .live{
    overflow: hidden;
  }
  .live-left{
    width: 200px;
    float: left;
  }
  .live-right{
    float: left;
    margin: 20px 0;
  }
</style>

